<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>留言表</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/layui/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/leave.css}"/>
</head>
<body>
<!-- 模块名 -->
<div class="layui-main">
    <div class="layui-row">
        <div class="layui-col-md12">
            <!-- 模块名 -->
            <blockquote class="layui-elem-quote" style="border-left: 5px solid #3385FF;">留言</blockquote>
            <div class="top">
                <form class="layui-form" action="#">
                    <div class="layui-form-item layui-form-text" id="leave-container">
                        <div class="layui-input-block">
                            <textarea placeholder="请输入留言内容" class="layui-textarea" required name="content"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-normal" lay-filter="leaveForm" lay-submit>
                                发布
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <blockquote class="layui-elem-quote" style="border-left: 5px solid #3385FF;">留言板</blockquote>
            <div class="leave-list">
                <ul>
                    <li>
                        <div class="student-name">
                            <span>
                                 <i class="layui-icon layui-icon-username"></i> halo
                            </span>
                            <div class="leavetime" style="float: right">
                                <i class="layui-icon layui-icon-time"></i>
                                2023-05-19 12:22:21
                            </div>
                        </div>
                        <div class="question">
                            pom里面加上这个配置， 这个意思大概就是忽略 yml文件中的中文注释
                        </div>
                        <div class="reply">
                            <a style="color: #1E9FFF;cursor: pointer;font-size: 14px">回复</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>

<div id="replyContainer" style="display: none">
    <form class="layui-form" action="#" id="replyForm">
        <div class="layui-form-item layui-form-text" id="reply-container">
            <div class="layui-input-block">
                <textarea placeholder="请输入留言内容" class="layui-textarea" required name="content"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal" lay-filter="replyForm" lay-submit>
                    提交
                </button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="cancleReply()">
                    取消
                </button>
            </div>
        </div>
    </form>
</div>

<!--引入js文件-->
<script type="text/javascript" th:src="@{/plugins/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/javascript/jquery-2.1.4.js}"></script>
<script type="text/javascript" th:src="@{/javascript/util/httpUtil.js}"></script>
<script>
    var form = null;
    var element = null;
    var layer = null;
    var leaveId = null;

    $(() => {
        loadLeaveData()

        layui.use(['form', 'element', 'layer'], function () {
            form = layui.form;
            element = layui.element;
            layer = layui.layer;

            form.on('submit(leaveForm)', function (data) {
                saveLeaveForm(data.field)
                return false;
            });

            form.on('submit(replyForm)', function (data) {
                saveReplyForm(data.field)
                return false;
            });
        })
    })

    /**
     * 将数据提交至后台
     * @param obj
     */
    function saveLeaveForm(obj) {
        jsonPost(obj, '/leave/insert', res => {
            if (res.data == true) {
                layer.msg("提交成功", {icon: 1, time: 1500}, () => {
                    loadLeaveData()
                })
            } else {
                layer.msg('发布失败', {icon: 5, time: 1500})
            }
        }, error => {
            console.error(error)
            layer.msg('服务器内部异常', {icon: 5, time: 1500})
        })
    }

    /**
     * 留言回复
     * @param _this
     * @param leaveId
     */
    function replyLeave(_this, leaveId) {
        this.leaveId = leaveId;
        $(_this).closest('.reply').append($('#replyContainer').html());
    }

    /**
     * 取消回复
     */
    function cancleReply() {
        $('#replyForm').remove();
    }

    /**
     * 回复提交
     * @param obj
     */
    function saveReplyForm(obj) {
        obj.leaveId = leaveId;
        obj.userId = 2;
        jsonPost(obj, '/reply/insert', res => {
            if (res.data === true) {
                layer.msg("提交成功", {icon: 1, time: 1500}, () => {
                    cancleReply();
                    loadLeaveData();
                })
            } else {
                layer.msg('发布失败', {icon: 5, time: 1500})
            }
        }, error => {
            console.error(error)
            layer.msg('服务器内部异常', {icon: 5, time: 1500})
        })
    }

    /**
     * 加载留言数据
     */
    function loadLeaveData() {
        get(null, '/leave/queryAll', res => {
            if (res.data && res.data.length > 0) {
                let data = res.data;
                var str = '';
                data.forEach(item => {
                    var replyStr = '<ul class="reply-ul">';
                    if (item.replyList && item.replyList.length > 0) {
                        item.replyList.forEach(reply => {
                            replyStr += '<li>\n' +
                                '                        <div class="student-name">\n' +
                                '                            <span>\n' +
                                '                                 <img src="https://images.cnblogs.com/cnblogs_com/HelloWxl/2196372/o_220731092324_a.JPG" width="20px" height="20px"> ' + reply.userId + ' \n' +
                                '                            </span>\n' +
                                '                            <div class="leavetime" style="float: right">\n' +
                                '                                <i class="layui-icon layui-icon-time"></i>\n' +
                                '                                ' + reply.createTime + '\n' +
                                '                            </div>\n' +
                                '                        </div>\n' +
                                '                        <div class="question">\n' +
                                '                            ' + reply.content + '' +
                                '                        </div>\n' +
                                '                        <div class="reply">\n' +
                                '                            <a style="color: #1E9FFF;cursor: pointer;font-size: 14px">回复</a>\n' +
                                '                        </div>\n' +
                                '                    </li>';
                        })
                    }
                    replyStr += '</ul>';
                    str += '<li>\n' +
                        '                        <div class="student-name">\n' +
                        '                            <span>\n' +
                        '                                 <i class="layui-icon layui-icon-username"></i> halo\n' +
                        '                            </span>\n' +
                        '                            <div class="leavetime" style="float: right">\n' +
                        '                                <i class="layui-icon layui-icon-time"></i>\n' +
                        '                            ' + item.createTime + '\n' +
                        '                            </div>\n' +
                        '                        </div>\n' +
                        '                        <div class="question">\n' +
                        '                         ' + item.content + '   ' +
                        '                        </div>\n' +
                        '                        <div class="reply">\n' +
                        '                           <a style="color: #1E9FFF;cursor: pointer;font-size: 14px" onclick="replyLeave(this,' + item.leaveId + ')" >回复</a>\n' +
                        '                        </div>\n' +
                        '                       ' + replyStr + '' +
                        '                    </li><hr>';
                })
                $('.leave-list ul').html(str);
            }
        }, error => {
            console.error(error)
            layer.msg('服务器内部异常', {icon: 5, time: 1500})
        })
    }


</script>
</html>
